﻿var cvs;
var ctx;

var BaseX = 320;
var BaseY = 371;

var MouseX = 0;
var MouseY = 0;

var MoveVecX = 0;
var MoveVecY = 0;

var pressEvt = "no event...";
var isMouseDown = false;


function LoadControls() {

    var controls = "<canvas id='controller'></canvas>";
    document.getElementById("fullscreen").innerHTML = controls;
    
    cvs = document.getElementById("controller");
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;

    ctx = cvs.getContext("2d");

    document.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);

    /************ BEGIN mouse controls ************/
    //document.onmousedown = function () { isMouseDown = true; UpdateMouse(); }
    document.onmousemove = UpdateMouse;
    //document.onmouseup = function () { isMouseDown = false; }
    /************ END mouse controls ************/

    /************ BEGIN pointer controls ************/
    //document.onmspointerdown = UpdateMouse;
    document.onmspointermove = UpdateMouse;
    //document.onmspointerup = 
    /************ END pointer controls ************/

    /************ BEGIN pointer controls ************/
    //document.on = function () { isMouseDown = true; UpdateMouse(); }     ////////////////////////////////////////////////
    document.onmousemove = UpdateMouse;
    //document.onmouseup = function () { isMouseDown = false; }
    /************ END pointer controls ************/

    ToFullScreen();
    DrawCanvas();
}



function DrawCanvas() {
    var img = document.getElementById("joystickbase");
    ctx.drawImage(img, 0, 0);

    img = document.getElementById("joystick");
    ctx.drawImage(img, MoveVecX + BaseX - 180, MoveVecY + BaseY - 231);

    img = document.getElementById("pulsebtn");
    ctx.drawImage(img, 680, 80);

    ctx.fillStyle = "#008000";
    ctx.fillRect(910, 140, 200, 200);

    ctx.fillStyle = "#000080";
    ctx.fillRect(1140, 240, 200, 200);

    ctx.fillStyle = "#FFFFFF";
    ctx.font = "14px Arial";
    //ctx.fillText("Joystick Control Test", 10, 10);
}


function UpdateMouse(event) {
    event = event || window.event;

    MouseX = event.clientX;
    MouseY = event.clientY;

    pressEvt = "no event...";

    if (0 < MouseX && MouseX < 640 && 0 < MouseY - 51 && MouseY - 51 < 640) {
        mX = MouseX - BaseX;
        mY = MouseY - BaseY;

        pressEvt = "JOYSTICK PRESSED!";

        var mH = Math.sqrt(mX * mX + mY * mY);

        if (mH > 160) {
            var pH = 160;
            var pX = (mX * pH) / mH;
            var pY = (mY * pH) / mH;

            MoveVecX = pX;
            MoveVecY = pY;
        } else {
            MoveVecX = mX;
            MoveVecY = mY;
        }
    } else {

        if (MoveVecX != 0 || MoveVecY != 0) {
            MoveVecX = 0;
            MoveVecY = 0;
        }

        if (MouseX > 680 && MouseX < 880 && MouseY - 51 > 80 && MouseY - 51 < 280) {
            pressEvt = "RED BUTTON PRESSED!";
        } else if (MouseX > 910 && MouseX < 1110 && MouseY - 51 > 140 && MouseY - 51 < 340) {
            pressEvt = "GREEN BUTTON PRESSED!";
        } else if (MouseX > 1140 && MouseX < 1340 && MouseY - 51 > 240 && MouseY - 51 < 440) {
            pressEvt = "BLUE BUTTON PRESSED!";
        }
    }

    ctx.clearRect(0, 0, cvs.width, cvs.height);
    DrawCanvas();

    ctx.fillText(pressEvt, 900, 40);

    //ctx.fillText("MousePosition: (" + MouseX + ", " + MouseY + ")", MouseX + 18, MouseY - 42);
    ctx.fillText("MoveVector: (" + MoveVecX.toFixed(2) + ", " + MoveVecY.toFixed(2) + ")", MoveVecX + BaseX - 80, MoveVecY + BaseY - 120);
}


function ToFullScreen() {

	if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
	    RunPrefixMethod(document, "CancelFullScreen");
	}
    else {
		RunPrefixMethod(document.getElementById("fullscreen"), "RequestFullScreen");
    }
}


// include the source references for this method
function RunPrefixMethod(obj, method) {

    var pfx = ["webkit", "moz", "ms", "o", ""];
    var p = 0, m, t;
    while (p < pfx.length && !obj[m]) {
        m = method;
        if (pfx[p] == "") {
            m = m.substr(0, 1).toLowerCase() + m.substr(1);
        }
        m = pfx[p] + m;
        t = typeof obj[m];
        if (t != "undefined") {
            pfx = [pfx[p]];
            return (t == "function" ? obj[m]() : obj[m]);
        }
        p++;
    }
}